<template>
  <div class="news_list mt20 px1000">
    <div v-for="(item,index) in news" :key="index" class="news_item mt20">
      <nuxt-link :to="`/news/detail/${item._id}`" class="news_title">
        <span v-if="item.isHot">热点</span>{{ item.title }}<em>{{ item.updated | date }}</em>
      </nuxt-link>
    </div>

    <div class="pagination_wrapper">
      <el-pagination
        :hide-on-single-page="value"
        :total="5"
        layout="prev, pager, next"
      />
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'

export default {
  name: 'NewsList',
  filters: {
    date (val) {
      return dayjs(val).format('YYYY-MM-DD')
    }
  },
  props: {
    news: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      value: false
      // news: [
      //   {
      //     title: '精品商机携手德善集团成功举办研讨会',
      //     time: '20210-8-17 5:09',
      //     isHot: true,
      //     id: '1'
      //   },
      //   {
      //     title: '精品商机携手德善集团成功举办研讨会',
      //     time: '20210-8-17 5:09',
      //     isHot: true,
      //     id: '2'
      //   }, {
      //     title: '精品商机携手德善集团成功举办研讨会',
      //     time: '20210-8-17 5:09',
      //     isHot: true,
      //     id: '3'
      //   },
      //   {
      //     title: '精品商机携手德善集团成功举办研讨会',
      //     time: '20210-8-17 5:09',
      //     isHot: true,
      //     id: '4'
      //   }, {
      //     title: '精品商机携手德善集团成功举办研讨会',
      //     time: '20210-8-17 5:09',
      //     isHot: true,
      //     id: '5'
      //   },
      //   {
      //     title: '精品商机携手德善集团成功举办研讨会',
      //     time: '20210-8-17 5:09',
      //     isHot: true,
      //     id: '6'
      //   }, {
      //     title: '精品商机携手德善集团成功举办研讨会',
      //     time: '20210-8-17 5:09',
      //     isHot: true,
      //     id: '7'
      //   },
      //   {
      //     title: '精品商机携手德善集团成功举办研讨会',
      //     time: '20210-8-17 5:09',
      //     isHot: true,
      //     id: '8'
      //   }
      // ]
    }
  }
}
</script>
<style lang="scss" scoped>
.news_item {
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  border-left: 5px solid #ffa800;
  .news_title {
    color: #666666;
    font-size: 18px;
    position: relative;
    display: flex;
    justify-items: center;
    align-items: center;
    span {
      display: inline-block;
      width: 40px;
      height: 25px;
      border-radius: 5px;
      line-height: 25px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      margin-right: 10px;
      background-color: #ffa800;
      box-sizing: border-box;
    }
    em{
      position: absolute;
      right: 0;
      font-size: 12px;
    }
  }
}

.pagination_wrapper{
  display: flex;
  justify-content: center;
}
</style>
